<template>
  <div class="card-container">
    <CustomCard
        title="校园信息"
        icon="records"
        color="#1989fa"
        description="管理校园通知、新闻和公告"
        @click="router.push({ path: '/add/news' })"
    />
    <CustomCard
        title="学生作业"
        icon="records"
        color="#1989fa"
        description="管理学生的课后作业"
        @click="router.push({ path: '/add/homework' })"
    />
    <CustomCard
        title="学生活动"
        icon="records"
        color="#1989fa"
        description="管理学生的活动信息。"
        @click="router.push({ path: '/add/activity' })"
    />
    <CustomCard
        title="学生评价"
        icon="records"
        color="#1989fa"
        description="管理学生的评语。"
        @click="router.push({ path: '/add/evaluation' })"
    />
    <CustomCard
        title="学生成绩"
        icon="records"
        color="#1989fa"
        description="管理学生的成绩"
        @click="router.push({ path: '/add/scores' })"
    />
    <CustomCard
        title="学生奖罚"
        icon="records"
        color="#1989fa"
        description="管理学生的奖罚情况"
        @click="router.push({ path: '/add/rewardpunished' })"
    />
    <CustomCard
        title="考勤管理"
        icon="records"
        color="#1989fa"
        description="管理学生考勤记录"
        @click="router.push({ path: '/add/attend' })"
    />
    <CustomCard
        title="监控管理"
        icon="records"
        color="#1989fa"
        description="管理学生考勤记录"
        @click="router.push({ path: '/add/monitor' })"
    />
  </div>
</template>

<script setup>
import CustomCard from '@/components/add/CustomCard.vue'; // 你需要创建和引入自定义的 Card 组件
import router from "@/router";
</script>

<style scoped>
.card-container {
  //display: flex;
  //flex-wrap: wrap;
  //gap: 20px; /* 调整卡片之间的间距 */
  //padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two cards per row */
  gap: 20px; /* Adjust spacing between cards */
  padding: 20px;
}

</style>